import React, { memo, useRef, useState } from "react";
import { DjRadioLeftWrap } from "./style";
import {
  getSizeImage,
  getCount,
  getYearMonthDay,
  formalMinuteSeconds,
  getCountPoint,
} from "@/utils/format-utils";
import Pagination from "@/components/pagination";
import { NavLink } from "react-router-dom";
import ListTitle from "@/components/listTitle";
import TableIntroduce from "@/components/tableIntroduce";

export default memo(function DjRadioLeft(props) {
  const data = props.data !== undefined ? props.data : "";

  const liRef = useRef();

  const userId = data ? data.dj.userId : "";

  return (
    <DjRadioLeftWrap>
      <div className="g-wrap6">
        <div className="DjRadio-top-box">
          <div className="djRadio-top-box-img coverall fl">
            <img src={getSizeImage(data.picUrl, 200)} alt="" />
          </div>
          <div className="djRadio-top-box-right fl">
            <ListTitle
              pageName={"djRadio"}
              djRadioName={data ? data.name : ""}
            />
            <TableIntroduce
              pageName={"djRadio"}
              imgUrl={data.dj !== undefined ? data.dj.avatarUrl : ""}
              userId={userId}
              nickName={data.dj !== undefined ? data.dj.nickname : ""}
              imageIcon={
                data.dj !== undefined
                  ? data.dj.avatarDetail !== null
                    ? data.dj.avatarDetail
                    : ""
                  : ""
              }
            />
            <div className="djRadio-btn-box">
              <a className="booking button2">
                <i className="button2">订阅({getCountPoint(data.subCount)})</i>
              </a>
              <a className="djRadio-play-all button2">
                <i className="button2">播放全部</i>
              </a>
              <a className="djRadio-zf button2">
                <i className="button2">
                  分享({getCountPoint(data.shareCount)})
                </i>
              </a>
            </div>
            <div className="djRadio-summary">
              <div className="summary-red-box fl">
                <NavLink
                  to={{
                    pathname: "/discover/djradio/category",
                    search: "?id=" + data.categoryId,
                  }}
                >
                  <span>{data.category}</span>
                </NavLink>
                {data.desc ? data.desc.split("\n")[0] : ""}
              </div>
              <div className="fl">
                <p>
                  {data.desc
                    ? data.desc.split("\n").map((item, index) => {
                        return index > 0 ? (
                          <React.Fragment key={item}>
                            {item}
                            <br />
                          </React.Fragment>
                        ) : (
                          <br key={item} />
                        );
                      })
                    : ""}
                </p>
              </div>
            </div>
          </div>
        </div>
        <div className="table-lists">
          <div className="show-table-box">
            <div className="show-table-left">
              <p>节目列表</p>
              <span>共{data.programCount}期</span>
            </div>
            <div className="show-table-right">
              <a className="music-a">
                <i className="music-icon imgIcon"></i>
                <span>生成外链播放器</span>
              </a>
              <a className="jx-a">
                <i className="jx"></i>
              </a>
              <a className="sx-a">
                <i className="sx"></i>
              </a>
            </div>
          </div>
          <div className="table-ul">
            <ul>
              {props.djProgram.length !== 0
                ? props.djProgram.programs.slice(0, 100).map((item, index) => {
                    return (
                      <li ref={liRef} key={item.id}>
                        <div className="djProgram-li-box">
                          <div className="djProgram-serialNum">
                            <span>{item.serialNum}</span>
                            <i className="djProgram-play tablepng"></i>
                          </div>
                          <div className="fxa djProgram-name">
                            <span>
                              <NavLink
                                to={{
                                  pathname: "/program",
                                  search: "?id=" + item.id,
                                }}
                              >
                                {item.name}
                              </NavLink>
                            </span>
                            <div className="azx dn">
                              <a>
                                <i className="icon-add imgIcon fl"></i>
                              </a>
                              <a>
                                <i className="icon-zf tablepng fl"></i>
                              </a>
                              <a>
                                <i className="icon-xz tablepng fl"></i>
                              </a>
                            </div>
                          </div>
                          <div className="fxa djProgram-playCount">
                            <span>播放{getCount(item.listenerCount)}</span>
                          </div>
                          <div className="fxa djProgram-goodCount">
                            <span>赞{getCount(item.likedCount)}</span>
                          </div>
                          <div className="fxa djProgram-createTime">
                            <span>{getYearMonthDay(item.createTime)}</span>
                          </div>
                          <div className="fxa djProgram-playtime">
                            <span>{formalMinuteSeconds(item.duration)}</span>
                          </div>
                        </div>
                      </li>
                    );
                  })
                : ""}
            </ul>
          </div>
        </div>
        <Pagination
          page={props.page}
          size={100}
          getPage={props.changePage}
          total={props.total}
        />

        {/* <Pagination current={props.page} onChange={props.changePage} defaultCurrent={1} pageSize={100} total={props.total} showSizeChanger={false} itemRender={itemRender} /> */}
      </div>
    </DjRadioLeftWrap>
  );
});
